<template>
  <div>
    <a-modal
      title="套餐详情"
      :visible="visible"
      :confirm-loading="loading"
      :width="720"
      @ok="modalOK"
      @cancel="cancelModal"
    >
      <a-spin :spinning="loading">
        <a-form
          :form="form"
          v-bind="formLayout"
          @submit="formSubmit"
          v-if="detailData"
        >
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="套餐ID">
                <span>{{ detailData.id }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="套餐名称"
              >
                <a-input
                  v-decorator="['name', {rules: [], initialValue: detailData.name}]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                label="套餐价格"
              >
                <a-input
                  v-decorator="['price', {rules: [], initialValue: detailData.price}]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="过期时间"
              >
                <a-date-picker
                  format="YYYY-MM-DD HH:mm:ss"
                  :disabled-date="disabledDate"
                  :disabled-time="disabledDateTime"
                  :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                  v-decorator="['expireTime', {rules: [], initialValue: detailData.expireTime}]"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { getMenuLists, updateMenu } from '@/api/menu'
import moment from 'moment'

export default {
  name: 'MenuDialog',
  data () {
    return {
      loading: false,
      detailData: null,
      formLayout: {
        labelCol: {
          span: 6
          // xs: { span: 24 },
          // sm: { span: 7 }
        },
        wrapperCol: {
          span: 18
          // xs: { span: 24 },
          // sm: { span: 13 }
        }
      },
      form: this.$form.createForm(this, { id: 10000 })
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: null
    }
  },
  watch: {
    visible (news, olds) {
      if (news) {
        this.init()
      }
    }
  },
  methods: {
    init () {
      console.log(this.model)
      getMenuLists({ id: this.model.id }).then(res => {
        this.detailData = res.data[0]
        console.log('success')
        console.log(res)
      }).catch(e => {
        console.error(e)
      })
    },
    moment,
    range (start, end) {
      const result = []
      for (let i = start; i < end; i++) {
        result.push(i)
      }
      return result
    },
    formSubmit () {

    },
    disabledDate (current) {
      // Can not select days before today and today
      return current && current < moment().endOf('day')
    },
    disabledDateTime () {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [ 55, 56 ]
      }
    },
    modalOK () {
      this.form.validateFieldsAndScroll((error, values) => {
        if (!error) {
          updateMenu(this.model.id, values).then(res => {
            this.$emit('ok')
          }).catch(e => {
            console.error(e)
          })
        }
      })
    },
    cancelModal () {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
